<template>
  <div class="order-detail">
    <Bread home="全部订单" crumbs="订单详情" />

    <el-table :data="detailData.info" border :header-cell-style="{ background: '#f9f9f9' }">
      <el-table-column label="订单状态">
        <template #default="scope">
          <p class="_status">{{ consts.orderStatus[scope.row.orderStatus] }}</p>
          <p class="_ordercode" v-if="scope.row.orderStatus === 'DELIVERED'">物流单号:{{ scope.row.trackingNumber }}</p>
        </template>
      </el-table-column>
      <el-table-column label="订单信息" width="779">
        <template #default="scope">
          <p><span class="_title">收货人：</span>{{ scope.row.shippingPerson }}</p>
          <p><span class="_title">地址：</span>{{ scope.row.shippingDetail }}</p>
          <p><span class="_title">手机号码：</span>{{ scope.row.shippingMobile }}</p>
          <p><span class="_title">买家留言：</span>{{ scope.row.buyerRemark }}</p>
          <p><span class="_title">订单编号：</span>{{ scope.row.orderCode }}</p>
          <p><span class="_title">商家：</span>{{ scope.row.supplierName }}</p>
        </template>
      </el-table-column>
    </el-table>

    <table class="table" cellspacing="0" cellpadding="0">
      <thead class="table_header_title">
        <th>商品信息</th>
        <th>属性</th>
        <th>单价</th>
        <th>折后单价</th>
        <th>数量</th>
        <th>金额</th>
        <th>折后金额</th>
      </thead>
      <tbody class="table_tbody">
        <template v-for="item in detailData.info" :key="item.orderCode">
          <tr>
            <td class="noborder"></td>
          </tr>
          <tr>
            <td colspan="7" class="last">
              <div class="info">
                <div class="order">
                  <span class="order-time">{{ $formater.formatDate(item.createTime) }}</span>
                  <span class="order-code">订单编号：{{ item.orderCode }}</span>
                </div>
                <div class="supplier">
                  <img class="store-icon" src="@/assets/images/dianpuxiao.png" />
                  <span>供应商 : {{ item.supplierName }}</span>
                </div>
              </div>
            </td>
          </tr>
          <tr class="goods" v-for="goods in item.orderGoodsList" :key="goods.goodsId">
            <td class="goods-inf">
              <div class="goods-info">
                <img class="goods-img" :src="goods.goodsImg" />
                <span class="goods-name">{{ goods.goodsName }}</span>
              </div>
            </td>
            <td>{{ goods.goodsSpec }}</td>
            <td>{{ goods.price }}</td>
            <td>{{ goods.discountPrice }}</td>
            <td>{{ goods.amount }}</td>
            <td>￥{{ (goods.price * goods.amount).toFixed(2) }}</td>
            <td class="goods-price last">￥{{ goods.totalDiscountPrice }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import Bread from '@/components/bread/index.vue'

const route = useRoute()
const router = useRouter()
const orderId = route.params.id

const status = {
  UNPAID: '待支付',
  UNDELIVER: '待发货',
  DELIVERED: '已发货',
  CANCELED: '已取消',
  COMPLETED: '已完成'
}

const detailData = reactive({
  info: [],
  list: [],
  dialogImageUrl: '',
  dialogVisible: false,
  dialogVisible2: false
})

const loadData = async () => {
  let { err, data } = await api.get(`/medinstrument/site/order/getOrderdetails?orderId=${orderId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    detailData.info.push(data.data)
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped lang="less">
.order-detail {
  min-height: 600px;
  width: 1080px;
  margin: 10px auto;

  ._status {
    font-size: 24px;
    color: #08a28c;
    font-weight: 560;
    letter-spacing: 2px;
    margin-bottom: 12px;
  }
  ._ordercode {
    color: var(--span-color-text);
    font-weight: 500;
  }

  .el-table {
    .cell {
      ._title {
        margin-right: 10px;
      }
    }
  }

  .table {
    border-collapse: collapse;
    width: 100%;

    th {
      width: 160px;
    }
    .table_header_title {
      height: 42px;
      background-color: var(--color-background);
      color: var(--span-color-text);
      margin-bottom: 20px;
    }

    .table_tbody {
      td.noborder {
        border: 0;
        height: 20px;
      }

      td.noborder:first-child {
        border-left: none;
      }

      tr {
        td {
          line-height: 18px;
          text-align: center;
        }

        td:first-child {
          border-left: 1px solid var(--border-color);
        }

        td.last {
          border-right: 1px solid var(--border-color);
        }
      }

      .info {
        display: flex;
        align-items: center;
        padding: 12px 0 12px 10px;
        height: 42px;
        box-sizing: border-box;
        border-top: 1px solid var(--border-color);
        background-color: var(--color-background);

        .order,
        .supplier {
          display: flex;
          align-items: center;
          height: 18px;
          line-height: 18px;
        }

        .order {
          .order-time {
            margin: 0 12px;
          }

          .order-code {
            color: var(--span-color-text);
            font-weight: 500;
          }
        }

        .supplier {
          margin-left: 90px;

          .store-icon {
            width: 20px;
            height: 20px;
            margin: 0 7px 0 11px;
          }
        }
      }

      .goods {
        .goods-inf {
          padding: 20px 20px 20px 54px;
        }

        .goods-price {
          font-weight: 600;
          color: var(--color-primary);
        }

        .goods-info {
          display: flex;
          align-items: center;

          .goods-img {
            display: inline-block;
            width: 72px;
            height: 72px;
            margin-right: 12px;
          }

          .goods-name {
            width: 180px;
          }
        }

        td {
          border-bottom: 1px solid rgba(228, 231, 237, 1);
        }
      }
    }
  }
}
</style>
